<template>
    <div class="container">
  
        <textarea placeholder="" v-model="html" @keydown="onKeyDownInput($event)"></textarea>
      <br />
      <h3>contenteditable element</h3>
      <div class="dataContainer" v-if="isShow">
        
      </div>
        <!-- <vue-tribute :options="options">
        <div
          class="content-editable"
          contenteditable="false"
          placeholder="@..."
        ></div>
      </vue-tribute> -->
  
  
      <br />
    </div>
  </template>
  <script>
  
  export default {
    components: {
     
    },
    data() {
      return {
        isShow:false,
        html:""
      };
    },
  
    methods: {
                  //@调用
                  onKeyDownInput(e) {
                    const {  code } = e
                  // 中文输入法的时候@的code是 229 英文code是 50， 判断是否按住shift + @键
                  // 无论keydown还是keyup都只有pc端有效，移动端无论输入什么keycode都是229！！！史诗级浏览器bug
                  if (e.keyCode === 229 || e.keyCode === 50) {
                      // e.preventDefault ? e.preventDefault() : (e.returnValue = false)
                      console.log('-------@------')
                      this.isShow = true 
                  }else if (code === "Backspace") {
                    console.log("删除")
                    this.$nextTick(()=>{
                      console.log("this.html",this.html)
                    })
                  
                  }
                  else {
                    this.isShow = false
                  }
              },
  
  
    }
  };
  </script>
  <style lang="scss">
  .dataContainer {
    width: 500px;
    height: 400px;
    border: 2px solid orangered;
  }
  * {
    box-sizing: border-box;
  }
  html,
  body {
    height: 100vh;
    width: 100vw;
  }
  body {
    background: linear-gradient(to right, #fc466b, #3f5efb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "Helvetica Neue", "Arial", sans-serif;
  }
  .scroll {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
  }
  .container {
    max-width: 355px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 20px;
    // .contaienrssss {
    //   position: relative;
    //   left: 20px;
    //   border: 2px solid black;
    // }
  }
  .v-tribute {
    width: 100%;
    position: relative;
  }
  input[type="text"],
  .content-editable {
    appearance: none;
    border: none;
    background: #eee;
    padding: 1rem 1rem;
    color: #666;
    width: 100%;
    border-radius: 0.25rem;
    font-size: 16px;
    outline: none;
    &:focus {
      background: #fff;
    }
  }
  .content-editable:empty:before {
    content: attr(placeholder);
    display: block;
    color: #666;
  }
  textarea {
    appearance: none;
    border: none;
    background: #eee;
    padding: 1rem;
    width: 100%;
    border-radius: 0.25rem;
    font-size: 16px;
    height: 100px;
    outline: none;
    &:focus {
      background: #fff;
    }
  }
  .btn {
    appearance: none;
    border: none;
    cursor: pointer;
    margin: 20px 0;
    background: #fc466b;
    color: #fff;
    font-size: 16px;
    padding: 8px 16px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(#000, 0.18);
    &:hover {
      background: darken(#fc466b, 3%);
    }
  }
  // Tribute-specific styles
  .tribute-container {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    max-height: 300px;
    max-width: 500px;
    overflow: auto;
    display: block;
    z-index: 999999;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(#000, 0.13);
  }
  .tribute-container ul {
    margin: 0;
    margin-top: 2px;
    padding: 0;
    list-style: none;
    background: #fff;
    border-radius: 4px;
    border: 1px solid rgba(#000, 0.13);
    background-clip: padding-box;
    overflow: hidden;
  }
  .tribute-container li {
    color: #3f5efb;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
  }
  .tribute-container li.highlight,
  .tribute-container li:hover {
    background: #3f5efb;
    color: #fff;
  }
  .tribute-container li span {
    font-weight: bold;
  }
  .tribute-container li.no-match {
    cursor: default;
  }
  .tribute-container .menu-highlighted {
    font-weight: bold;
  }
  .menu-container {
    border: 2px solid black;
    position: relative;
    top: 2000px;
  }
  </style>
  